<template>
	<view class="mapView_img">
		<view :id="mapId" class="mapBox"></view>
	</view>
</template>
<script>
	import L from 'leaflet'
	import 'leaflet/dist/leaflet.css'
	export default {
		name: 'mapImg',
		data() {
			return {
				map: null,
				mapDone: false,
				mapId: 'idMap'
			}
		},
		methods: {
			async initMap(imgUrl) {
				const imgInfo = await this.getImgWidth(imgUrl)
				const scale = (imgInfo.height / imgInfo.width).toFixed(2)
				let info = uni.getWindowInfo()
				let screenW = info.screenWidth * 4
				let screenH = screenW * scale
				return new Promise((resolve, reject) => {
					this.mapId = this.getUUID(32, 16)
					this.$nextTick(() => {
						// 设置能够缩放的级别，1-4级。初始级别值是1
						this.map = L.map(this.mapId, {
							minZoom: 1,
							maxZoom: 4,
							center: [0, 0],
							zoom: 1,
							zoomControl: false,
							crs: L.CRS.Simple,
							attributionControl: false // 去除leaflet
							// leaflet使用1：1映射，在屏幕像素和经纬度坐标系统之间。换句话说，我们的图片是平的，不是全球的，我们在投影一张平面图片。
						})
						// 定义了图片尺寸和它的路径，路径可以引用网络链接
						var w = screenW
						var h = screenH
						var southWest = this.map.unproject([0, h], this.map.getMaxZoom() - 1)
						var northEast = this.map.unproject([w, 0], this.map.getMaxZoom() - 1)
						this.bounds = new L.LatLngBounds(southWest, northEast)
						this.imageOverlay = L.imageOverlay(imgUrl, this.bounds).addTo(this.map)

						// 图片通过地图的方式放出来，所以需要一个像素坐标到经纬度坐标（系统）的转换
						this.map.setMaxBounds(this.bounds)
						resolve()
					})
				})
			},
			getImgWidth(imgUrl) {
				return new Promise((resolve, reject) => {
					let img = new Image()
					let obj = {}
					img.onload = function () {
						obj = {
							width: this.width,
							height: this.height
						}
						resolve(obj)
					}
					img.src = imgUrl
				})
			},
			async setImg(imgUrl) {
				if (!this.map) {
					await this.initMap(imgUrl)
					return
				}
				if (this.imageOverlay) {
					this.imageOverlay.setUrl(imgUrl)
				}
			},
			/** *
			 *
			 * 获取请求的UUID，指定长度和进制,如
			 * getUUID(8, 2)   //"01001010" 8 character (base=2)
			 * getUUID(8, 10) // "47473046" 8 character ID (base=10)
			 * getUUID(8, 16) // "098F4D35"。 8 character ID (base=16)
			 *
			 */
			getUUID(len, radix) {
				var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
				var uuid = []
				var i
				radix = radix || chars.length
				if (len) {
					for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
				} else {
					var r
					uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
					uuid[14] = '4'
					for (i = 0; i < 36; i++) {
						if (!uuid[i]) {
							r = 0 | (Math.random() * 16)
							uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r]
						}
					}
				}
				return uuid.join('')
			}
		},
		computed: {},
		mounted() {}
	}
</script>
<style lang="less">
	.mapView_img {
		height: 100%;
		width: 100%;
		position: relative;
		#map {
			height: 100%;
			width: 100%;
			background: #e8f0ff !important;
		}
		.mapBox {
			height: 100%;
			width: 100%;
			background: #e8f0ff !important;
		}
	}
</style>
